<template>
  <view class="container">
    <view style="position: fixed; top: 0; left: 0; background-color: #fff; z-index: 99; width: 100%">
      <!-- 搜索框 -->
      <uni-search-bar
        class="uni-mt-10"
        radius="100"
        placeholder="请搜索您想要的内容"
        clearButton="none"
        cancelButton="none"
        @confirm="search"
        v-model="title"
        style="margin-bottom: 42rpx"
      />
    </view>
    <view style="height: 120rpx"></view>
    <!-- 分类 -->
    <scroll-view scroll-x="true" style="display: flex; white-space: nowrap; position: fixed; top: 104rpx; left: 0; background-color: #fff; z-index: 99">
      <view>
        <view v-for="(item, index) in type" @click="choosetype(item)" :key="item.id" style="display: inline-block; text-align: center; margin: 0 15rpx">
          <image :src="img_url + item.image" mode="" style="width: 84rpx; height: 84rpx"></image>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 分割线 -->
    <view style="width: 750rpx; height: 12rpx; background: #f3f3f3; border-radius: 0rpx 0rpx 0rpx 0rpx; margin-top: 40rpx; position: fixed; top: 200rpx; left: 0"></view>

    <!-- 站位盒子 -->
    <view style="height: 110rpx"></view>
    <!--数据列表 -->

    <view class="item" v-for="item in list" :key="item.id" @click.stop="godetail(item)">
      <!-- 头部标题 -->
      <view class="header">
        <image :src="img_url + item.avatar" style="width: 88rpx; height: 88rpx; margin-right: 16rpx; border-radius: 50%" mode="aspectFill"></image>
        <view class="topright">
          <view style="display: flex; align-items: center">
            <text style="font-weight: 500; font-size: 32rpx; color: #151515">{{ item.nickname }}</text>
            <image :src="item.gender == 1 ? '../../static/myimg/a8.png' : '../../static/myimg/a9.png'" style="width: 28rpx; height: 28rpx; margin-left: 12rpx" mode=""></image>
          </view>
          <view style="font-weight: 400; font-size: 24rpx; color: #666666">{{ item.places == 1 ? '室内活动' : '室外活动' }}</view>
        </view>
      </view>
      <!-- 活动信息 -->
      <view class="active">
        <image :src="img_url + item.images" style="width: 160rpx; height: 168rpx" mode="aspectFill"></image>
        <view class="right">
          <view class="title">{{ item.title }}</view>
          <!-- 人数 -->
          <view style="display: flex; align-items: center; margin-top: 8rpx">
            <image src="../../static/dynamicimg/peoplenum.png" style="width: 24rpx; height: 24rpx; margin-right: 8rpx" mode=""></image>
            <text>{{ item.num }}人</text>
            <view style="position: relative; top: 0rpx left: 0">
              <!-- 女人 -->
              <image src="../../static/myimg/a11.png" style="width: 56rpx; height: 24rpx" mode=""></image>
              <text style="position: absolute; left: 25rpx; top: 10rpx; font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.girl_num }}</text>
            </view>
            <view style="position: relative; top: 0; left: 0">
              <!-- 男人 -->
              <image src="../../static/myimg/a10.png" style="width: 56rpx; height: 24rpx" mode=""></image>
              <text style="position: absolute; left: 25rpx; top: 10rpx; font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.male_num }}</text>
            </view>
          </view>
          <!-- 时间 -->
          <view style="display: flex; align-items: center; margin: 8rpx 0">
            <image src="../../static/myimg/a13.png" style="width: 24rpx; height: 24rpx; margin-right: 8rpx" mode=""></image>
            <text style="font-weight: 400; font-size: 24rpx; color: #151515">{{ item.acttime + ' ' + item.week }}</text>
          </view>
          <!-- 地点 -->
          <view style="display: flex; align-items: center">
            <image src="../../static/myimg/a14.png" style="width: 24rpx; height: 24rpx; margin-right: 8rpx" mode=""></image>
            <view
              style="
                width: 354rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-weight: 400;
                font-size: 24rpx;
                color: #151515;
                flex: 1;
              "
            >
              {{ item.address }}
            </view>
          </view>
        </view>
      </view>
      <!-- 报名的头像 -->
      <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 24rpx">
        <view style="display: flex; align-items: center">
          <image
            :src="img_url + item2.avatar"
            style="width: 56rpx; height: 56rpx; margin-right: -20rpx; border-radius: 50%"
            v-for="item2 in item.userlist"
            :key="item2.id"
            mode=""
          ></image>
          <text style="font-weight: 400; font-size: 24rpx; color: #666666; margin-left: 22rpx">报名中({{ item.join_num + '/' + item.num }})</text>
        </view>
        <view
          v-if="item.is_report == 0 && item.is_entry == 0"
          @click.stop="joinact(item)"
          style="
            width: 160rpx;
            height: 60rpx;
            background: #feff01;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #151515;

            text-align: center;
            line-height: 60rpx;
          "
        >
          立即报名
        </view>
        <view
          v-if="item.is_entry == 1"
          style="
            width: 160rpx;
            height: 60rpx;
            background: #cccfdb;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
            text-align: center;
            line-height: 60rpx;
          "
        >
          已参与
        </view>
        <view
          v-if="item.is_report == 1 && item.is_entry == 0"
          style="
            width: 160rpx;
            height: 60rpx;
            background: #ff3742;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
            text-align: center;
            line-height: 60rpx;
          "
        >
          已爆满
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      img_url: this.img_url,
      listheight: 0,
      type: [],
      typeid: '',
      page: 1,
      list: [],
      title: ''
    };
  },
  onShow() {
    this.page = 1;
    // this.list = [];
  },
  async onReachBottom() {
    console.log('触底了');
    this.page++;
    const res = await this.http('/doings/list', {
      page: this.page,
      doings_cate_id: this.typeid
    });
    console.log('数据列表----', res);
    if (res.data.data.length != 0) {
      res.data.data.forEach((item) => {
        item.acttime = dayjs(item.starttime * 1000).format('MM-DD hh:mm') + '-' + dayjs(item.endtime * 1000).format('MM-DD hh:mm');
        if (new Date(item.starttime * 1000).getDay() == 0) {
          item.week = '周日';
        } else if (new Date(item.starttime * 1000).getDay() == 1) {
          item.week = '周一';
        } else if (new Date(item.starttime * 1000).getDay() == 2) {
          item.week = '周二';
        } else if (new Date(item.starttime * 1000).getDay() == 3) {
          item.week = '周三';
        } else if (new Date(item.starttime * 1000).getDay() == 4) {
          item.week = '周四';
        } else if (new Date(item.starttime * 1000).getDay() == 5) {
          item.week = '周五';
        } else if (new Date(item.starttime * 1000).getDay() == 6) {
          item.week = '周六';
        }
      });
      this.list.push(...res.data.data);
    } else {
      uni.showToast({
        title: '数据加载完毕',
        icon: 'none'
      });
    }
  },
  async onLoad() {
    await this.gettype();
    this.getlist();
  },
  methods: {
    // 搜索
    async search() {
      this.page = 1;

      const res = await this.http('/doings/list', {
        page: this.page,
        // doings_cate_id: this.typeid,
        doings_cate_id: '',
        title: this.title
      });
      console.log('搜索数据', res);
      this.list = res.data.data;
      this.list.forEach((item) => {
        item.acttime = dayjs(item.starttime * 1000).format('MM-DD hh:mm') + '-' + dayjs(item.endtime * 1000).format('MM-DD hh:mm');
        if (new Date(item.starttime * 1000).getDay() == 0) {
          item.week = '周日';
        } else if (new Date(item.starttime * 1000).getDay() == 1) {
          item.week = '周一';
        } else if (new Date(item.starttime * 1000).getDay() == 2) {
          item.week = '周二';
        } else if (new Date(item.starttime * 1000).getDay() == 3) {
          item.week = '周三';
        } else if (new Date(item.starttime * 1000).getDay() == 4) {
          item.week = '周四';
        } else if (new Date(item.starttime * 1000).getDay() == 5) {
          item.week = '周五';
        } else if (new Date(item.starttime * 1000).getDay() == 6) {
          item.week = '周六';
        }
      });
    },
    // 跳转详情
    godetail(item) {
      uni.navigateTo({
        url: '/dynamic/activedetail/activedetail?id=' + item.id
      });
    },
    //参加活动
    async joinact(item) {
      console.log(item);
      const res = await this.http('/doings/entry', {
        doings_id: item.id
      });
      console.log('加入活动', res);
      uni.showToast({
        title: res.msg
      });
      this.typeid = '';
      this.getlist();
    },
    // 获取活动列表
    async getlist() {
      const res = await this.http('/doings/list', {
        page: this.page,
        doings_cate_id: this.typeid
      });
      console.log('数据列表----', res);
      this.list = res.data.data;
      if (res.data.data.length == 0) {
        return uni.showToast({
          title: '暂无数据',
          icon: 'none'
        });
      }
      this.list.forEach((item) => {
        item.acttime = dayjs(item.starttime * 1000).format('MM-DD hh:mm') + '-' + dayjs(item.endtime * 1000).format('MM-DD hh:mm');
        if (new Date(item.starttime * 1000).getDay() == 0) {
          item.week = '周日';
        } else if (new Date(item.starttime * 1000).getDay() == 1) {
          item.week = '周一';
        } else if (new Date(item.starttime * 1000).getDay() == 2) {
          item.week = '周二';
        } else if (new Date(item.starttime * 1000).getDay() == 3) {
          item.week = '周三';
        } else if (new Date(item.starttime * 1000).getDay() == 4) {
          item.week = '周四';
        } else if (new Date(item.starttime * 1000).getDay() == 5) {
          item.week = '周五';
        } else if (new Date(item.starttime * 1000).getDay() == 6) {
          item.week = '周六';
        }
      });
    },
    // 获取活动分类
    async gettype() {
      const res = await this.http('/index/doingscate');
      console.log('活动分类', res);
      this.type = res.data;
      // this.typeid = this.type[0].id;
    },
    choosetype(item) {
      this.typeid = item.id;
      console.log(this.typeid);
      this.page = 1;
      this.list = [];
      this.getlist();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .item {
    box-sizing: border-box;
    width: 690rpx;
    height: 456rpx;
    background: #fffff1;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 14rpx 16rpx;
    margin: 34rpx 30rpx;
    .header {
      display: flex;
      align-items: center;
    }
    .active {
      display: flex;
      padding-bottom: 22rpx;
      border-bottom: 2rpx solid #e8e8e8;
      margin-top: 20rpx;
      .right {
        flex: 1;
        margin-left: 12rpx;
        .title {
          font-weight: bold;
          font-size: 28rpx;
          color: #151515;
        }
      }
    }
  }
}
</style>
<style>
.uni-searchbar__box {
  justify-content: flex-start !important;
}
page {
  background: linear-gradient(to right,  #FEFBFF, #FFFBF5 );
}
</style>
